<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection"/>
    <link rel="stylesheet" type="text/css" href="css/public.min.css">
</head>

<body>
<header id="header" class="header info-header whiteBg">
    <div class="checked-box">
        <span class="checked">东城区</span>
            <span class="icon-arrow icon-angle-down"></i>
    </div>
    <div class="select-box">
        <ul class="select hide">
            <li class="act">西城区</li>
            <li>东城区</li>
            <li>朝阳区</li>
            <li>海淀区</li>
        </ul>
    </div>
</header>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    $(function() {
        $("li").click(function() {
            var obj = $(this);
            var active = obj.hasClass('act');
            if (active) {
                return;
            } else {
                 obj.addClass('act').siblings().removeClass('act');
            }
            $(".checked").text(obj.text());
            $(".select").toggleClass('hide');
        });

        $(".checked-box").click(function() {
            $(".select").toggleClass('hide');
            if ($(".icon-arrow").hasClass("icon-angle-down")) {
                $(".icon-arrow").removeClass("icon-angle-down").addClass("icon-angle-up");
            } else {
                $(".icon-arrow").removeClass("icon-angle-up").addClass("icon-angle-down");
            }
        });
    });


</script>
</body>

</html>
